<template>
  <div class="left-basic left-tools">
    <el-collapse v-model="activeCollapse">
      <el-collapse-item
        v-for="item in basicList"
        :key="item.id"
        :title="item.name"
        :name="item.type"
      >
        <template #title>
          <el-icon class="caret-bottom">
            <CaretBottom />
          </el-icon>
          <el-icon class="caret-top">
            <CaretTop />
          </el-icon>
          <span class="sa-m-l-8">{{ item.name }}</span>
        </template>
        <div class="sa-flex sa-flex-wrap">
          <template v-for="element in item.data" :key="element">
            <div
              class="item"
              :class="[
                element.type,
                item.type == 'basic' && activeBasic == element.type ? 'is-basic' : '',
                item.type == 'theme' && theme == element.type ? 'is-theme' : '',
              ]"
              @click.stop="selectBasic(item.type, element.type)"
            >
              <img :src="'./static/images/shop/decorate/' + element.type + '.png'" />
              <span>{{ element.name }}</span>
            </div>
          </template>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  export default {
    name: 'left-basic',
  };
</script>
<script setup>
  /**
   * @property {Object} basicData 数据
   */
  import { computed, reactive, ref, watch } from 'vue';
  import { basicList, initTemplateData } from '../../data';

  const emit = defineEmits(['leftBasicBack', 'changeTheme']);
  const props = defineProps({
    basicData: {
      type: Object,
      default: initTemplateData.basic,
    },
    fromType: String,
  });

  // 折叠面板展开
  const activeCollapse = reactive(['basic', 'theme']);

  // 编辑页面设置
  const activeBasic = ref('tabbar');

  const theme = computed(() => props.basicData?.theme || 'orange');

  function selectBasic(basicType, type) {
    // 页面设置
    if (basicType == 'basic') {
      activeBasic.value = type;
      emit('leftBasicBack', {
        type: type,
        template: props.basicData[type],
      });
    }
    // 主题色
    if (basicType == 'theme') {
      emit('changeTheme', { theme: type });
    }
  }

  // 初始化数据
  if (props.fromType != 'diypage') {
    selectBasic('basic', activeBasic.value);
  }

  watch(
    () => props.basicData,
    () => {
      selectBasic('basic', activeBasic.value);
    },
    {
      deep: true,
    },
  );
</script>
